/*
    制作者：九哥
    样式：订单样式
    时间：2019-03-01
*/




#orderPage {
    width:100%;max-width:600px;
    position:absolute;top:0; }



.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{clear:both;}
.clearfix{
    *zoom:1;/*IE/7/6*/
}

/***** 订单页面 *****/
#orderTitle {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:1.066667rem;
    text-align:center;
    background:#f4f4f4;
    border-bottom:1px solid #dddddd;
    position:fixed;
    top:0;
    z-index:10;
    font-size: .453333rem;
    font-weight: bold;
    color: #111111;
    margin-bottom: .533333rem;
}
#orderPpt {
    width: 100%
}
#orderPpt li{
    list-style: none;
}
#orderPpt img {     width: 100%;
    min-height: 150px;}
#orderDetail {
    display: flex;
    display: -webkit-flex;
    width:100%;
    max-width:450px;
    min-height:400px;
    background:#ffffff;
    padding-top: .133333rem;
}
#orderDetail .menu { 
    width: 2.96rem;
    text-align:center;
    font-size: .4rem;
    float:left;
    margin-right: .266667rem;
}
#orderDetail .menu p {
    margin:8px 0;width:60%;
    font-weight:bold;
    font-size: .4rem;
    color: #424242;
    position: relative;
}
#orderDetail .menu p::before{
    content: '';
    display: inline-block;
    position: absolute;
    width: .106667rem;
    height: .613333rem;
    background-color: #3B7DF2;
    left: 0;
    border-radius: 0 .106667rem .106667rem 0;
}
#orderDetail .menu div { cursor:pointer; }
#orderDetail .menu div { 
    height: 1.226667rem;
    line-height: 1.226667rem;
    background:#F8F8F8;
    color:#717171; 
}
#orderDetail .menu div.click {
    background:#3B7DF2;color:#ffffff; }
#orderDetail .menu div#orderMore { color:#0057F2; }
#orderDetail .list {
  /* display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;*/
    margin-top: 1.013333rem;
    width: 6.8rem;
    /* min-height: 400px; */
    align-content: flex-start;
    position: relative;
}
#orderDetail .order {
    width: 2rem;
    margin-right: .25rem;
    margin-bottom: .25rem;
    float: left;
}
#orderDetail .order img {
   /* width: 100%;
    height: 1.9rem;*/
 }
#orderDetail .order p {
    text-align:center;
    font-size: .266667rem;
    font-weight: bold;
    color:#555555;
    overflow: hidden;
   /* text-overflow:ellipsis;
    white-space: nowrap;*/
 }
 #orderDetail .order p:last-child{
     max-width: 2.3rem;
     overflow: hidden;
     text-overflow: ellipsis;
     /*white-space: nowrap;*/
 }
/***** 订单页面 *****/





/***** 订单详情页面 *****/
#orderShowTitle, #orderParamTitle, .orderPayTypePage .orderParamTitle {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:1.066667rem;
    text-align:center;
    background:#F6F6F6;
    border-bottom:1px solid #ececec;
    position:fixed;
    top:0;
    z-index:10;
    font-size: .453333rem;
    font-weight: bold;
    color: #111111;
    margin-bottom: .533333rem;
}
#orderRtn {
    width: .4rem;
    position:absolute;
    top: .32rem;
    left: .266667rem;
    cursor:pointer;
 }
#orderShowSample { 
    background:#ffffff;
 }
#orderShowSample{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    padding-left: .533333rem;
    padding-right: .533333rem;
    margin-bottom: .266667rem;
}
#orderShowSample .orderShowSampleImg{
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    padding-top: .533333rem;
    padding-bottom: .533333rem;
}
#orderShowSample .orderShowSampleImg .bigImg{
    width: 6.666667rem;
    height: 6.666667rem;
    margin-right: .133333rem;
    overflow: hidden;
    background: rgba(235,235,235,1);
    border-radius: 4px;
    position: relative;
}
#orderShowSample .orderShowSampleImg .bigImg img{
    width: 100%;
  /*  height: 100%;*/
    transform: translate(0, -50%);
    position: relative;
    top: 50%;
}
#orderShowSample .orderShowSampleImg .smallImg ul li{
    width: 2.133333rem;
    height: 2.133333rem;
   
}
#orderShowSample .orderShowSampleImg .smallImg ul li{
    margin-bottom: .133333rem;
}
#orderShowSample .orderShowSampleImg .smallImg ul li:last-child{
    margin-bottom: 0;
}

#orderShowSample .orderShowSampleImg .smallImg img{
    display: block;
    width: 100%;
    height: 100%;
}
.orderShowSampleSubmit{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
}
.orderShowSampleSubmit .first{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
}
.orderShowSampleSubmit .first span:first-child{
    font-size: .4rem;
    color: #0057F2;
}
.orderShowSampleSubmit .first span:last-child{
    font-size: .4rem;
    color:#232323;
}
.orderShowSampleSubmit .apply{
    margin: .666667rem auto;
}
.orderShowSampleSubmit .apply div{
    width: 4rem;
    height: 1.066667rem;
    line-height: 1.066667rem;
    background: url(../images/order/button.png)no-repeat center center;
    text-align: center;
    font-size: .4rem;
    color: #fff;
    margin: 0 auto;
}
#orderShowAttr{
    background-color: #fff;
    margin-bottom: .266667rem;
    padding:0 .533333rem;
}
.orderShowSampleSubmit .apply .shuoming{
    color: #ff4343;
    width: 100%;
    text-align: left;
    font-size: 0.4rem;
    margin-top: 0.4rem;
}

#orderShowSample .callDiv{
    margin-bottom: 0.2rem;
}
#orderShowSample .callDiv .callIco{
    font-size: 0.5rem;
    color: #e92727;
}






















#orderShowAttr .list{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
}
#orderShowAttr .list li {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    height: 1.693333rem;
    align-items: center;
    border-bottom:1px solid #EEEEEE;
}
#orderShowAttr .list li div:first-child{
    width: 2.58rem;
    font-size: .373333rem;
    color: #232323;
    text-align: left;
    font-weight: bold;
}

#orderShowAttr .list li div:last-child{
   font-size: .373333rem;
   color: #232323;
}
#orderShowAttr .list li .product ul{
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
}
#orderShowAttr .list li .product ul li{
    width: 1.053333rem;
    height: .666667rem;
    background-color: #f5f5f5;
    color: #242424;
    margin-right: .266667rem;
    border-radius: .053333rem;
    justify-content: center;
    line-height: .666667rem;
}
#orderShowAttr .list li .product ul li~.down{
    color: #fff;
    background-color: #0057F2;
}
#orderShowAttr .custom{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    height: 1.6rem;
    align-items: center;
}
#orderShowAttr .custom div{
    width: 3.013333rem;
    height: .8rem;
    text-align: center;
    line-height: .8rem;
    font-size: .32rem;
    color: #3B7DF2;
    border:1px solid #9DC0FF;
    border-radius: .133333rem;
}

#orderShowDetail{
    background: #fff;
    padding-bottom: 2rem;
}
#orderShowDetail p { 
    padding:.626667rem .4rem;
    /*color:#888888;*/
    /*line-height: .533333rem;*/
    color: #414C63;
 }
#orderShowDetail p img { width:100%; }

#orderShowAttr .color span{
    padding: 0.05rem 0.5rem;  
    background: #F5F5F5;
    margin-right: 0.2rem;
}
#orderShowAttr .color span:last-child{
    margin-right: 0;
}
/***** 订单详情页面 *****/





/***** 订单参数页面 *****/
#orderParamPage #orderParamTitle #orderRtns{
    width: .4rem;
    position:absolute;
    top: .32rem;
    left: .266667rem;
    cursor:pointer;
}
#orderParamAddress, #orderParamIntro{
    padding: .453333rem;
    margin-bottom: .266667rem;
    background-color: #fff;
    display: flex;
    display: -webkit-flex;
    align-items: center;
}
#orderParamAddress{
    flex-direction: column;
    font-size: .373333rem;
}
#orderParamAddress .nameAndPhone{
    display: flex;
    display: -webkit-flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: .333333rem;
}
#orderParamAddress .address{
    display: flex;
    display: -webkit-flex;
    width: 100%;
    justify-content: flex-start;
}
#orderParamAddress .title{
    display: inline-block;
    min-width: 1.84rem;
    text-align: left;
    color: #1D273C;
}
#orderParamAddress .content{
    color: #83909F;
}
#orderParamIntro{
    display: flex;
    display: block;
    flex-direction: row;
}
#orderParamIntro .img{
    width: 2.133333rem;
    /* height: 2.133333rem; */
    margin-right: .4rem;
    /* flex: 1; */
    float: left;
}
#orderParamIntro .img img{
    width: 100%;
    /* height: 100%; */
}
#orderParamIntro .content{
    line-height: .64rem;
    font-size: .36rem;
    color: #1D273C;
}
#orderParamList{
    background-color: #fff;
    margin-bottom: .266667rem;
}
#orderParamList .title{
    height: 2.08rem;
    line-height: 2.08rem;
    text-align: center;
    color: #1D273C;
    font-size: .4rem;
    font-weight: bold;
}
#orderParamList .content{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
}
#orderParamList .content li{
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    color: #1D273C;
    font-size: .373333rem;
    border-bottom: 1px solid #F3F3F4;
    
}
#orderParamList .content li:first-child{
    border-top: 1px solid #F3F3F4;
}
#orderParamList .content li span{
    display: inline-block;
    width: 3.2rem;
    height: 1.066667rem;
    background-color: #F3F3F4;
    line-height: 1.066667rem;
    text-align: center;
}
#orderParamList .content li div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6.8rem;
    height: 1.066667rem;
}
#orderParamList .content li input[class=bz]{
    border: 0;
    height: .466667rem;
    font-size: .373333rem;
    width: 90%;
}
#orderParamList .content li input[class=bz]::-webkit-input-placeholder{
    font-size: .373333rem;
    text-align: center;
}
#orderParamBtn{
    height: 3.426667rem;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
}
#orderParamBtn p{
    font-size: .373333rem;
    color: #83909F;
}
#orderParamBtn .button{
    margin-top: .573333rem;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
}
#orderParamBtn .button div{
    width: 4rem;
    height: 1.08rem;
    border-radius: .106667rem;
    text-align: center;
    line-height: 1.08rem;
    color: #fff;
    font-size: .4rem;
}
#orderParamBtn .button .apply{
    background-color: #4B5880;
    margin-right: .28rem;
}
#orderParamBtn .button .submit{
    background: url(../images/order/button.png)no-repeat center center;
}
/***** 订单参数页面 *****/

#orderShowSample .ordername{
    display: block;
    /* text-align: center; */
    font-size: 0.6rem;
    color: #484848;
}
#orderShowSample .ordername .editOrder{
    color: #0044ff;
    font-size: 0.5rem;
}
#orderShowSample .ordername .editOrder.jinzhi{
    color: #adafb3;
    font-size: 0.35rem;
}


#orderShowSample  .infoDiv .h3{
    width: 100%;
    font-size: 0.5rem;
    color: #868686;
    text-align: center;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}
#orderShowSample .infoDiv .gongyiyaoqiu {
    width: 100%;
    font-size: 0.4rem;
    max-height: 4rem;
    overflow-y: auto;
    display: block;
    border: 1px #ffffff solid;
    resize: none;
}



#orderShowDetail .hetong{
    width: 100%;
}

#orderShowDetail .hetong #hetong{
    width: 50%;
    margin: 0 auto;
    display: block;
}

















#orderShowSample .status{
    font-size: .4rem;
    color: #0057F2;
    margin-bottom: 0.3rem;
}

.piclist{
    width: 100%;
}
#orderShowPage .title{
    width: 100%;
    display: block;
    text-align:center;
    font-size: 0.6rem;
    margin-bottom: 0.3rem;
    margin-top: 0.5rem;
}
.piclist .ul{
    width: 90%;
    margin: 0 auto;
}

.piclist .ul li {
    width: 100%;
}


.piclist .ul li .img{
    width: 7rem;
    margin: 0 auto;
    display: block;
}
.piclist .ul li .alt{
    width: 100%;
    font-size: 0.5rem;
    text-align: center;
    margin-bottom: 1rem;
}

.conDiv{
    background-color: #fff;
    margin-bottom: .266667rem;
    padding: 0 .533333rem;
}
.conDiv .list{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
}

.conDiv .list li{
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    height: 1.693333rem;
    align-items: center;
    border-bottom: 1px solid #EEEEEE;
}

.conDiv .list li div:last-child {
    font-size: .373333rem;
    color: #232323;
}
.conDiv .list li div:first-child {
    width: 2.08rem;
    font-size: .373333rem;
    color: #232323;
    text-align: left;
    font-weight: bold;
}

.detailContent .detail{
    font-size: 0.5rem;
    width: 90%;
    display: block;
    margin: 0 auto;
    margin-bottom: 45px;
    margin-top: 18px;
    color: #5b5b5b;
}
#orderShowSample .desc{
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

#orderShowSample .grapp{
    position: absolute;
    right: 5px;
    color: grey;
}
#orderShowSample .grapp .grapcount{
    color: #f13b3b;
    font-size: 0.35rem;
    margin-left: 0.08rem;
    margin-right: 0.08rem;
}


#costlist .inputDiv{
    width: 4.5rem;
}









#orderDetail .order .goodsdiv{
    width: 100%;
    /* height: 91px; */
    position: relative;
    overflow: hidden;
    /* background-color: antiquewhite; */
    /* background: rgba(235,235,235,1); */
    border-radius: 10px;
}
#orderDetail .order .goodsdiv .img{
    width: 1.9rem; 
   height: 1.9rem;
    /* transform: translate(0, -50%); */
    position: relative;
    /* top: 50%;*/
}
#orderDetail .order .goodsdiv .tagico{
    background-image: url(putong.png);
    width: 20px;
    height: 20px;
    background-size: 100% 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
}
#orderDetail .order .goodsdiv .tagico.qiangdan{
    background-image: url(qiangdan.png);
}
.orderShowSampleImg .tagico{
    background-image: url(putong.png);
    width:25px;
    height:25px;
    background-size: 100% 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
}

.orderShowSampleImg .tagico.qiangdan{
    background-image: url(qiangdan.png);
}


